<template>
  <div>
    <closeTagButton
      id="closeTagButtonRef"
      style="position: absolute; right: 20px; z-index: 999"
    />
    <el-tabs v-model="activeName" type="card" class="demo-tabs">
      <el-tab-pane label="销售合同预收款详情" name="A">
        <el-card shadow="never" style="margin-top: 1%">
          <template #header>
            <div style="display: flex; justify-content: space-between">
              <div class="card-header">
                <div
                  style="
                    width: 4px;
                    height: 20px;
                    background-color: #409eff;
                    margin-right: 5px;
                  "
                />
                <span>预收款信息</span>
              </div>
              <div />
            </div>
          </template>
          <el-form :model="form" label-width="170px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="合同编号" style="width: 90%">
                  <el-input
                    v-model="form.contractNo"
                    placeholder=""
                    disabled
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="合同名称" style="width: 90%">
                  <el-input
                    v-model="form.contractName"
                    placeholder=""
                    disabled
                    clearable
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="采购单位" style="width: 90%">
                  <el-input
                    v-model="form.purchaseDeptName"
                    placeholder=""
                    disabled
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="项目所属分公司" style="width: 90%">
                  <el-input
                    v-model="form.projectDeptName"
                    placeholder=""
                    disabled
                    clearable
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="项目名称" style="width: 90%">
                  <el-input
                    v-model="form.projectName"
                    placeholder=""
                    disabled
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="项目地址" style="width: 90%">
                  <el-input
                    v-model="form.projectAddress"
                    placeholder=""
                    disabled
                    clearable
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="供应商" style="width: 85%">
                  <el-select
                    v-model="form.supplierCategoryName"
                    placeholder=""
                    disabled
                    style="width: 37%"
                  >
                    <el-option
                      v-for="item in supplierCategoryNameOptions"
                      :key="item.key"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                  <el-input
                    v-model="form.supplierDeptName"
                    placeholder=""
                    disabled
                    clearable
                    style="width: 58%; margin-left: 10px"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="合同总量" style="width: 85%">
                  <el-input
                    v-model="form.contractNum"
                    placeholder=""
                    disabled
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="合同总额含税（元）" style="width: 85%">
                  <el-input
                    v-model="form.contractTotalPrice"
                    placeholder=""
                    disabled
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="合同总额实际含税（元）" style="width: 85%">
                  <el-input
                    v-model="form.contractTotalRealPrice"
                    placeholder=""
                    disabled
                    clearable
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="预收款截止日期" style="width: 85%">
                  <el-date-picker
                    v-model="form.contractPrePaymentDate"
                    type="date"
                    value-format="YYYY-MM-DD"
                    placeholder=""
                    disabled
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="合同预收款" style="width: 85%">
                  <div style="display: flex">
                    <el-input
                      v-model="form.contractPrePaymentRate"
                      placeholder=""
                      clearable
                      disabled
                      style="width: 90%"
                    />
                    <div style="margin-left: 20px">%</div>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="预收款金额" style="width: 85%">
                  <el-input
                    v-model="form.contractPrePaymentPrice"
                    placeholder=""
                    disabled
                    clearable
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
        <!-- <el-card shadow="never" style="margin-top: 1%">
          <template #header>
            <div style="display: flex; justify-content: space-between">
              <div class="card-header">
                <div
                  style="
                    width: 4px;
                    height: 20px;
                    background-color: #409eff;
                    margin-right: 5px;
                  "
                />
                <span>收据信息</span>
              </div>
              <div />
            </div>
          </template>
          <el-form :model="receiptform" label-width="170px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="申请人" style="width: 90%">
                  <el-input
                    v-model="receiptform.applyUserName"
                    placeholder=""
                    disabled
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="申请时间" style="width: 90%">
                  <el-date-picker
                    v-model="receiptform.applyDate"
                    type="date"
                    value-format="YYYY-MM-DD"
                    disabled
                    placeholder=""
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="申请说明" style="width: 90%">
                  <el-input
                    v-model="receiptform.applyMark"
                    placeholder=""
                    disabled
                    clearable
                    :rows="3"
                    type="textarea"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="上传人" style="width: 90%">
                  <el-input
                    v-model="receiptform.uploadUserName"
                    placeholder=""
                    disabled
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="上传时间" style="width: 90%">
                  <el-date-picker
                    v-model="receiptform.uploadDate"
                    type="date"
                    value-format="YYYY-MM-DD"
                    disabled
                    placeholder=""
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="上传说明" style="width: 90%">
                  <el-input
                    v-model="receiptform.receiptMark"
                    placeholder=""
                    disabled
                    clearable
                    :rows="3"
                    type="textarea"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="附件" style="width: 90%">
                  <el-upload
                    v-model="receiptform.receiptFile"
                    class="upload-demo"
                    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                    multiple
                    :before-remove="beforeRemove"
                    :limit="3"
                  >
                    <template #tip>
                      <div class="el-upload__tip" style="width: 50%" />
                    </template>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card> -->
        <el-card shadow="never" style="margin-top: 1%">
          <template #header>
            <div style="display: flex; justify-content: space-between">
              <div class="card-header">
                <div
                  style="
                    width: 4px;
                    height: 20px;
                    background-color: #409eff;
                    margin-right: 5px;
                  "
                />
                <span>合同收款记录</span>
              </div>
            </div>
          </template>
          <vxe-table
            border
            min-height="100"
            header-align="center"
            :data="CollectionTableData"
            :column-config="{ resizable: true }"
            :row-config="{ isHover: true }"
            size="mini"
            show-overflow
          >
            <vxe-column
              field="contractPreTotalPrice"
              title="合同预收款总金额（元）"
            />
            <vxe-column
              field="contractReceiveTotalPrice"
              title="合同预收款-已收款（元）"
            />
            <vxe-column
              field="contractNoReceiveTotalPrice"
              title="合同预收款-未收款（元）"
            />
          </vxe-table>
          <vxe-table
            border
            height="300"
            header-align="center"
            :data="CollectionTableData"
            :column-config="{ resizable: true }"
            :row-config="{ isHover: true }"
            size="mini"
            show-overflow
          >
            <vxe-column field="receiveDate" title="收款时间" />
            <vxe-column field="receiveType" title="收款方式" />
            <vxe-column field="receiveType" title="收款类型" />
            <vxe-column field="invoiceNo" title="发票号" width="200" />
            <vxe-column field="receivePrice" title="收款金额" />
            <vxe-column field="file" title="附件" />
            <vxe-column field="mark" title="内容及用途" />
          </vxe-table>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="销售合同详情" name="B">
        <el-card shadow="never" style="margin-top: 1%">
          <template #header>
            <div style="display: flex; justify-content: space-between">
              <div class="card-header">
                <div
                  style="
                    width: 4px;
                    height: 20px;
                    background-color: #409eff;
                    margin-right: 5px;
                  "
                />
                <span>项目信息</span>
              </div>
              <div />
            </div>
          </template>
          <el-form :model="contractform" label-width="150px">
            <el-row>
              <el-col :span="24">
                <el-form-item label="合同类型" style="width: 95%">
                  <el-radio-group
                    v-model="contractform.contractMethod"
                    disabled
                  >
                    <el-radio value="0" size="large"
                      >电线电缆及光迁光缆</el-radio
                    >
                    <el-radio value="1" size="large">电梯及扶梯</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="采购单位" style="width: 90%">
                  <el-input
                    v-model="contractform.purchaseDeptName"
                    placeholder=""
                    disabled
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="项目所属分公司" style="width: 90%">
                  <el-input
                    v-model="contractform.projectDeptName"
                    placeholder=""
                    disabled
                    clearable
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="项目名称" style="width: 90%">
                  <el-input
                    v-model="contractform.projectName"
                    placeholder=""
                    disabled
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="项目地址" style="width: 90%">
                  <el-input
                    v-model="contractform.projectAddress"
                    placeholder=""
                    disabled
                    clearable
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="项目联系人" style="width: 90%">
                  <el-input
                    v-model="contractform.projectManager"
                    placeholder=""
                    disabled
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系电话" style="width: 90%">
                  <el-input
                    v-model="contractform.projectManagerPhone"
                    placeholder=""
                    disabled
                    clearable
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
        <el-card shadow="never" style="margin-top: 1%">
          <template #header>
            <div style="display: flex; justify-content: space-between">
              <div class="card-header">
                <div
                  style="
                    width: 4px;
                    height: 20px;
                    background-color: #409eff;
                    margin-right: 5px;
                  "
                />
                <span>合约方信息</span>
              </div>
              <div />
            </div>
          </template>
          <el-form :model="contractform" label-width="150px">
            <el-row>
              <el-col :span="24">
                <el-form-item label="供应厂商" style="width: 90%">
                  <el-select
                    v-model="contractform.supplierCategoryName"
                    placeholder="请选择 供应商品类"
                    disabled
                    style="width: 20%"
                  >
                    <el-option
                      v-for="item in supplierCategoryNameOptions"
                      :key="item.key"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                  <el-input
                    v-model="contractform.supplierDeptName"
                    placeholder=""
                    disabled
                    clearable
                    style="width: 30%; margin-left: 10px"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="供应商" style="width: 90%">
                  <el-input
                    v-model="contractform.supplyDeptName"
                    placeholder=""
                    disabled
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="询价单号" style="width: 85%">
                  <el-input
                    v-model="contractform.inquiryNo"
                    placeholder=""
                    disabled
                    clearable
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="合同编号" style="width: 90%">
                  <el-input
                    v-model="contractform.contractNo"
                    placeholder=""
                    disabled
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="合同名称" style="width: 90%">
                  <el-input
                    v-model="contractform.contractName"
                    placeholder=""
                    disabled
                    clearable
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="采购负责人" style="width: 90%">
                  <el-input
                    v-model="contractform.purchasePersonName"
                    placeholder=""
                    disabled
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系电话" style="width: 90%">
                  <el-input
                    v-model="contractform.purchasePhone"
                    placeholder=""
                    disabled
                    clearable
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="允许超合同金额" style="width: 95%">
                  <el-radio-group v-model="contractform.isPriceFlag" disabled>
                    <el-radio value="1" size="default">是</el-radio>
                    <el-radio value="0" size="default">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="允许超合同材料数量" style="width: 95%">
                  <el-radio-group v-model="contractform.isNumFlag" disabled>
                    <el-radio value="1" size="default">是</el-radio>
                    <el-radio value="0" size="default">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
        <el-card shadow="never" style="margin-top: 1%">
          <template #header>
            <div style="display: flex; justify-content: space-between">
              <div class="card-header">
                <div
                  style="
                    width: 4px;
                    height: 20px;
                    background-color: #409eff;
                    margin-right: 5px;
                  "
                />
                <span>其他信息</span>
              </div>
              <div />
            </div>
          </template>
          <el-form :model="form" label-width="170px">
            <el-row>
              <el-col :span="8">
                <el-form-item label="合同总量" style="width: 90%">
                  <el-input
                    v-model="contractform.contractNum"
                    placeholder=""
                    disabled
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="签订日期" style="width: 90%">
                  <el-date-picker
                    v-model="contractform.signDate"
                    type="date"
                    value-format="YYYY-MM-DD"
                    disabled
                    placeholder=""
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="回款截止日期" style="width: 90%">
                  <el-date-picker
                    v-model="contractform.paymentDeadlineDate"
                    type="date"
                    value-format="YYYY-MM-DD"
                    disabled
                    placeholder=""
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="合同总额含税（元）" style="width: 90%">
                  <el-input
                    v-model="contractform.contractTotalPrice"
                    placeholder=""
                    disabled
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="合同总额实际含税（元）" style="width: 90%">
                  <el-input
                    v-model="contractform.contractTotalRealPrice"
                    placeholder=""
                    disabled
                    clearable
                    style="width: 37%"
                  />
                  <el-input
                    v-model="contractform.contractTotalRealPriceMark"
                    placeholder=""
                    disabled
                    clearable
                    style="width: 58%; margin-left: 10px"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="备注" style="width: 95%">
                  <el-input
                    v-model="contractform.mark"
                    placeholder=""
                    disabled
                    clearable
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="合同附件" style="width: 90%">
                  <el-upload
                    v-model="salesFileList"
                    class="upload-demo"
                    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                    multiple
                    :before-remove="beforeRemove"
                    :limit="3"
                  >
                    <template #tip>
                      <div class="el-upload__tip" style="width: 50%" />
                    </template>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
        <el-card shadow="never" style="margin-top: 1%">
          <template #header>
            <div style="display: flex; justify-content: space-between">
              <div class="card-header">
                <div
                  style="
                    width: 4px;
                    height: 20px;
                    background-color: #409eff;
                    margin-right: 5px;
                  "
                />
                <span>合同收款方式</span>
              </div>
              <div />
            </div>
          </template>
          <el-form label-width="180px">
            <el-row>
              <el-col :span="24">
                <el-form-item label="价格类型">
                  <el-radio-group
                    v-model="salesSecondContractModel.priceType"
                    disabled
                  >
                    <el-radio value="0" size="default">锁定</el-radio>
                    <el-radio value="1" size="default">浮动</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="支付说明">
                  <el-input
                    v-model="salesSecondContractModel.priceTypeMark"
                    type="textarea"
                    :rows="1"
                    disabled
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="基准价（元）">
                  <el-input
                    v-model="salesSecondContractModel.basePrice"
                    disabled
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="涨幅">
                  <el-input
                    v-model="salesSecondContractModel.increasePrice"
                    disabled
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="涨幅比率">
                  <el-input
                    v-model="salesSecondContractModel.increaseRate"
                    disabled
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="收款周期">
                  <el-radio-group
                    v-model="salesSecondContractModel.paymentCycle"
                    disabled
                  >
                    <el-radio value="0" size="default">到货结算</el-radio>
                    <el-radio value="1" size="default">款清发货</el-radio>
                    <el-radio value="2" size="default">月度结算</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="收款节点">
                  <!-- <el-checkbox label="合同预收款" disabled />
                <el-checkbox label="订单预收款" disabled /> -->
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <vxe-table
            border
            min-height="300px"
            header-align="center"
            :column-config="{ resizable: true }"
            :row-config="{ isHover: true }"
            :data="salesNodePayTableData"
            size="mini"
            style="margin-left: 180px"
          >
            <vxe-column
              v-for="column in salesNodePayTableColumns"
              :key="column.field"
              :field="column.field"
              :title="column.title"
              :min-width="column.width"
              :align="column.align"
            >
              <!-- 节点类型 -->
              <template
                v-if="column.field == 'nodeType'"
                v-slot:default="{ row }"
              >
                <vxe-select
                  v-model="row.nodeType"
                  placehoder=""
                  style="display: inline-block"
                  placement="bottom-start"
                  disabled
                >
                  <vxe-option
                    v-for="item in salesNodeTypeOptions"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  />
                </vxe-select>
              </template>
              <!-- 付款节点时间 && 电线电缆 -->
              <template
                v-else-if="
                  column.field === 'payTime' &&
                  contractform.contractMethod === '0'
                "
                v-slot:default="{ row }"
              >
                <span v-if="row.nodeType == '0'">合同签订后</span>
                <span v-if="row.nodeType == '1'">订单签订后</span>
                <vxe-select
                  v-if="row.nodeType == '2'"
                  v-model="row.nodeTriggerType"
                  style="width: 30%; display: inline-block"
                  placement="bottom-start"
                  disabled
                >
                  <vxe-option
                    v-for="(
                      item, index
                    ) in getSalesAvailableNodeTriggerTypeList(
                      salesSecondContractModel.paymentCycle,
                      row.nodeType
                    )"
                    :key="index"
                    :value="item.value"
                    :label="item.label"
                  />
                </vxe-select>
                &nbsp;
                <!-- 付款节点时间 - 自定义&&月度结算&&订单实付款 -->
                <vxe-input
                  v-if="
                    row.nodeTriggerType === '9' &&
                    salesSecondContractModel.paymentCycle === '2' &&
                    row.nodeType === '2'
                  "
                  v-model="row.nodeTriggerTypeName"
                  style="width: 30%; display: inline-block"
                  disabled
                />
                <!-- 付款节点时间 - 自定义&&月度结算&&非订单实付款 (用不上) -->
                <!-- 付款节点时间 - 自定义&&非月度结算&&订单实付款 -->
                <vxe-input
                  v-if="
                    row.nodeTriggerType === '9' &&
                    salesSecondContractModel.paymentCycle != '2' &&
                    row.nodeType === '2'
                  "
                  v-model="row.nodeTriggerTypeName"
                  style="width: 30%; display: inline-block"
                  disabled
                />
                <!-- 付款节点时间 - 自定义&&非月度结算&&非订单实付款 (用不上) -->
                <!-- 付款节点时间 - 非自定义&&月度结算&&订单实付款 -->
                <vxe-input
                  v-if="
                    row.nodeTriggerType != '9' &&
                    salesSecondContractModel.paymentCycle === '2' &&
                    row.nodeType === '2'
                  "
                  v-model="row.monthDay"
                  type="number"
                  style="width: 15%; display: inline-block"
                  :min="0"
                  disabled
                />
                <span
                  v-if="
                    row.nodeTriggerType != '9' &&
                    salesSecondContractModel.paymentCycle === '2' &&
                    row.nodeType === '2'
                  "
                  >（个月）</span
                >
                <vxe-input
                  v-if="
                    row.nodeTriggerType != '9' &&
                    salesSecondContractModel.paymentCycle === '2' &&
                    row.nodeType === '2'
                  "
                  v-model="row.natureDay"
                  type="number"
                  style="width: 15%; display: inline-block"
                  :min="0"
                  disabled
                />
                <span
                  v-if="
                    row.nodeTriggerType != '9' &&
                    salesSecondContractModel.paymentCycle === '2' &&
                    row.nodeType === '2'
                  "
                  >（日）</span
                >
                <!-- 付款节点时间 - 非自定义&月度结算&&非订单实付款 -->
                <vxe-input
                  v-if="
                    row.nodeTriggerType != '9' &&
                    salesSecondContractModel.paymentCycle === '2' &&
                    row.nodeType != '2'
                  "
                  v-model="row.natureDay"
                  type="number"
                  style="width: 15%; display: inline-block"
                  :min="0"
                  disabled
                />
                <span
                  v-if="
                    row.nodeTriggerType != '9' &&
                    salesSecondContractModel.paymentCycle === '2' &&
                    row.nodeType != '2'
                  "
                  >（个自然日）</span
                >
                <!-- 付款节点时间 - 非自定义&&非月度结算&&订单实付款 -->
                <vxe-input
                  v-if="
                    row.nodeTriggerType != '9' &&
                    salesSecondContractModel.paymentCycle != '2' &&
                    row.nodeType === '2'
                  "
                  v-model="row.natureDay"
                  type="number"
                  style="width: 15%; display: inline-block"
                  :min="0"
                  disabled
                />
                <span
                  v-if="
                    row.nodeTriggerType != '9' &&
                    salesSecondContractModel.paymentCycle != '2' &&
                    row.nodeType === '2'
                  "
                  >（个自然日）</span
                >
                <!-- 付款节点时间 - 非自定义&&非月度结算&&非订单实付款 -->
                <vxe-input
                  v-if="
                    row.nodeTriggerType != '9' &&
                    salesSecondContractModel.paymentCycle != '2' &&
                    row.nodeType != '2'
                  "
                  v-model="row.natureDay"
                  type="number"
                  style="width: 15%; display: inline-block"
                  :min="0"
                  disabled
                />
                <span
                  v-if="
                    row.nodeTriggerType != '9' &&
                    salesSecondContractModel.paymentCycle != '2' &&
                    row.nodeType != '2'
                  "
                  >（个自然日）</span
                >
                <!-- 一直显示 -->
                <span>，完成回款</span>
              </template>
              <!-- 付款节点时间 && 电梯扶梯 -->
              <template
                v-else-if="
                  column.field === 'payTime' &&
                  contractform.contractMethod === '1'
                "
                v-slot:default="{ row }"
              >
                <span v-if="row.nodeType == '0'">合同签订后</span>
                <span v-if="row.nodeType == '1'">订单签订后</span>
                <vxe-select
                  v-if="row.nodeType == '2'"
                  v-model="row.nodeTriggerType"
                  style="width: 35%; display: inline-block"
                  placement="bottom-start"
                  disabled
                >
                  <vxe-option
                    v-for="item in salesNodeTriggerTypeForLift"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  />
                </vxe-select>
                &nbsp;
                <!-- 自定义 -->
                <vxe-input
                  v-if="row.nodeTriggerType === '9'"
                  v-model="row.nodeTriggerTypeName"
                  style="width: 50%; display: inline-block"
                  disabled
                />
                <!-- 非自定义 非月度结算-->
                <vxe-input
                  v-if="
                    row.nodeTriggerType != '9' &&
                    salesSecondContractModel.paymentCycle != '2'
                  "
                  v-model="row.natureDay"
                  type="number"
                  style="width: 15%; display: inline-block"
                  :min="0"
                  disabled
                />
                <span
                  v-if="
                    row.nodeTriggerType != '9' &&
                    salesSecondContractModel.paymentCycle != '2'
                  "
                  >（个自然日）</span
                >
                <!-- 非自定义 月度结算-->
                <vxe-input
                  v-if="
                    row.nodeTriggerType != '9' &&
                    salesSecondContractModel.paymentCycle === '2'
                  "
                  v-model="row.monthDay"
                  type="number"
                  style="width: 15%; display: inline-block"
                  :min="0"
                  disabled
                />
                <span
                  v-if="
                    row.nodeTriggerType != '9' &&
                    salesSecondContractModel.paymentCycle === '2'
                  "
                  >（个月）</span
                >
                <vxe-input
                  v-if="
                    row.nodeTriggerType != '9' &&
                    salesSecondContractModel.paymentCycle === '2'
                  "
                  v-model="row.natureDay"
                  type="number"
                  style="width: 15%; display: inline-block"
                  :min="0"
                  disabled
                />
                <span
                  v-if="
                    row.nodeTriggerType != '9' &&
                    salesSecondContractModel.paymentCycle === '2'
                  "
                  >（日）</span
                >
              </template>
              <!-- 完成付款比例 -->
              <template
                v-else-if="column.field == 'backPayRate'"
                v-slot:default="{ row }"
              >
                <vxe-input
                  v-model="row.backPayRate"
                  type="number"
                  :min="0"
                  disabled
                />
              </template>
              <!-- 节点说明 -->
              <template
                v-else-if="column.field == 'nodeMark'"
                v-slot:default="{ row }"
              >
                <!-- 自定义 && 月度结算 && 订单实付款 -->
                <span
                  v-if="
                    salesSecondContractModel.paymentCycle === '2' &&
                    row.nodeTriggerType === '9' &&
                    row.nodeType === '2'
                  "
                >
                  {{ row.nodeTriggerTypeName }}，完成订单总金额
                  {{ row.backPayRate }} %的回款
                </span>
                <!-- 自定义 && 月度结算 && 非订单实付款 （用不上）-->
                <!-- 自定义 && 非月度结算 && 订单实付款 -->
                <span
                  v-if="
                    salesSecondContractModel.paymentCycle != '2' &&
                    row.nodeTriggerType === '9' &&
                    row.nodeType === '2'
                  "
                >
                  {{ row.nodeTriggerTypeName }}，完成订单总金额
                  {{ row.backPayRate }} %的回款
                </span>
                <!-- 自定义 && 非月度结算 && 非订单实付款（用不上） -->
                <!-- 非自定义 && 月度结算 && 订单实付款 -->
                <span
                  v-if="
                    salesSecondContractModel.paymentCycle === '2' &&
                    row.nodeTriggerType != '9' &&
                    row.nodeType === '2'
                  "
                >
                  {{ row.nodeTriggerTypeName }}
                  {{ row.monthDay }} 个月 {{ row.natureDay }} 日，完成订单总金额
                  {{ row.backPayRate }} %的回款
                </span>
                <!-- 非自定义 && 月度结算 && 非订单实付款）-->
                <span
                  v-if="
                    salesSecondContractModel.paymentCycle === '2' &&
                    row.nodeTriggerType != '9' &&
                    row.nodeType != '2'
                  "
                >
                  {{ row.nodeTriggerTypeName }}
                  {{ row.natureDay }} 个自然日，完成订单总金额
                  {{ row.backPayRate }} %的回款
                </span>
                <!-- 非自定义 && 非月度结算 && 订单实付款 -->
                <span
                  v-if="
                    salesSecondContractModel.paymentCycle != '2' &&
                    row.nodeTriggerType != '9' &&
                    row.nodeType === '2'
                  "
                >
                  {{ row.nodeTriggerTypeName }}
                  {{ row.natureDay }} 个自然日，完成订单总金额
                  {{ row.backPayRate }} %的回款
                </span>
                <!-- 非自定义 && 非月度结算 && 非订单实付款-->
                <span
                  v-if="
                    salesSecondContractModel.paymentCycle != '2' &&
                    row.nodeTriggerType != '9' &&
                    row.nodeType != '2'
                  "
                >
                  {{ row.nodeTriggerTypeName }}
                  {{ row.natureDay }} 个自然日，完成订单总金额
                  {{ row.backPayRate }} %的回款
                </span>
              </template>
            </vxe-column>
          </vxe-table>
        </el-card>
        <el-card shadow="never" style="margin-top: 1%">
          <template #header>
            <div style="display: flex; justify-content: space-between">
              <div class="card-header">
                <div
                  style="
                    width: 4px;
                    height: 20px;
                    background-color: #409eff;
                    margin-right: 5px;
                  "
                />
                <span>申请材料</span>
                <div class="header-span">
                  <div class="item">
                    <div
                      class="container"
                      style="
                        background: rgb(67, 94, 194);
                        color: rgb(255, 255, 255);
                      "
                    >
                      蓝色底色
                    </div>
                    <span>复制的材料</span>
                  </div>
                  <div class="item">
                    <div
                      class="container"
                      style="background: rgb(204, 204, 204)"
                    >
                      灰色底色
                    </div>
                    <span>订购数量大于合同量</span>
                  </div>
                  <div class="item">
                    <div class="container" style="color: rgb(245, 108, 108)">
                      红色文字
                    </div>
                    <span>和材料字典不同</span>
                  </div>
                </div>
              </div>
              <div>
                <el-button
                  type="primary"
                  color="#1E3485"
                  @click="openViewForPurchase()"
                  >预览/下载</el-button
                >
              </div>
            </div>
          </template>
          <vxe-table
            ref="materialTableRef"
            border
            show-footer
            header-align="center"
            min-height="450"
            :column-config="{ resizable: true }"
            :row-config="{ isHover: true }"
            :data="salesMaterialTableData"
            :footer-data="salesMaterialTableFooterData"
            size="mini"
            :footer-method="footerMethod"
          >
            <vxe-column type="seq" title="序号" width="60" />
            <vxe-column
              v-for="column in salesMaterialTableColumns"
              :key="column.field"
              :field="column.field"
              :title="column.title"
              :fixed="column.fixed"
              :min-width="column.width"
              :align="column.align"
            >
              <!-- TODO 可能存在税率计算 -->
              <template
                v-if="column.field == 'materialUnit'"
                v-slot:default="{ row }"
              >
                <vxe-input v-if="row.editType" v-model="row.materialUnit" />
                <span v-if="!row.editType">{{ row.materialUnit }}</span>
              </template>
              <template
                v-else-if="column.field == 'materialBrand'"
                v-slot:default="{ row }"
              >
                <vxe-input v-if="row.editType" v-model="row.materialBrand" />
                <span v-if="!row.editType">{{ row.materialBrand }}</span>
              </template>
              <template
                v-else-if="column.field == 'materialNum'"
                v-slot:default="{ row }"
              >
                <vxe-input v-if="row.editType" v-model="row.materialNum" />
                <span v-if="!row.editType">{{ row.materialNum }}</span>
              </template>
              <template
                v-else-if="column.field == 'includingTaxUnitPrice'"
                v-slot:default="{ row }"
              >
                <vxe-input
                  v-if="row.editType"
                  v-model="row.includingTaxUnitPrice"
                />
                <span v-if="!row.editType">{{
                  row.includingTaxUnitPrice
                }}</span>
              </template>
              <template
                v-else-if="column.field == 'excludingTaxUnitPrice'"
                v-slot:default="{ row }"
              >
                <vxe-input
                  v-if="row.editType"
                  v-model="row.excludingTaxUnitPrice"
                />
                <span v-if="!row.editType">{{
                  row.excludingTaxUnitPrice
                }}</span>
              </template>
              <template
                v-else-if="column.field == 'tax'"
                v-slot:default="{ row }"
              >
                <vxe-input v-if="row.editType" v-model="row.tax" />
                <span v-if="!row.editType">{{ row.tax }}</span>
              </template>
              <template
                v-else-if="column.field == 'includingTaxTotalPrice'"
                v-slot:default="{ row }"
              >
                <vxe-input
                  v-if="row.editType"
                  v-model="row.includingTaxTotalPrice"
                />
                <span v-if="!row.editType">{{
                  row.includingTaxTotalPrice
                }}</span>
              </template>
              <template
                v-else-if="column.field == 'materialMark'"
                v-slot:default="{ row }"
              >
                <vxe-input v-if="row.editType" v-model="row.materialMark" />
                <span v-if="!row.editType">{{ row.materialMark }}</span>
              </template>
            </vxe-column>
          </vxe-table>
          <vxe-pager
            v-model:current-page="salesMaterialTablePage.currentPage"
            v-model:page-size="salesMaterialTablePage.pageSize"
            :layouts="[
              'Sizes',
              'PrevJump',
              'PrevPage',
              'Number',
              'NextPage',
              'NextJump',
              'FullJump',
              'Total'
            ]"
            :total="salesMaterialTablePage.total"
            size="small"
            @page-change="salesMaterialTablePageChange"
          />
        </el-card>
        <el-card shadow="never" style="margin-top: 1%">
          <template #header>
            <div style="display: flex; justify-content: space-between">
              <div class="card-header">
                <div
                  style="
                    width: 4px;
                    height: 20px;
                    background-color: #409eff;
                    margin-right: 5px;
                  "
                />
                <span>项目收货人</span>
              </div>
            </div>
          </template>
          <el-form label-width="150px">
            <vxe-table
              ref="tableRef"
              border
              :data="salesContractTableData"
              size="mini"
            >
              <vxe-column field="realName" title="姓名" fixed="left" />
              <vxe-column field="phone" title="手机号" fixed="left" />
            </vxe-table>
          </el-form>
        </el-card>
      </el-tab-pane>
    </el-tabs>
    <!-- 弹窗组件 -->
    <div class="dialogs">
      <filePreview
        :visible="filePreviewVisible"
        :fileId="fileId"
        :fileType="fileType"
        @close="closeFilePreview"
      />
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import type { TabsPaneContext } from "element-plus";
import { ElMessage, ElMessageBox } from "element-plus";
import closeTagButton from "@/components/closeTagButton.vue";
import { VxePagerEvents, VxeTablePropTypes } from "vxe-table";
import { useRoute } from "vue-router";
import type { UploadUserFile, UploadProps, UploadFile } from "element-plus";

import {
  getcontractpaymentfindByIdInfo,
  getreceiptdetail,
  getpaymenthistorypageList
} from "@/api/ERP_PaymentMange";

import filePreview from "@/components/filePreview.vue";

import { getDictDetail } from "@/api/utils";
import {
  getSalesContractDetail,
  getProjectReceiver,
  getNodePayFormData,
  getNodePayTableData,
  getContractMaterialList,
  getContractMaterialFooter,
  getSalesProcureId
} from "@/api/ERP_sales";
import { getProcureContractInfo } from "@/api/ERP_procure";
import { getAuditHistoryTaskList } from "@/api/ERP_public";

// 接收路由传参
const route = useRoute();
const queryParams = route.query;
// 预览弹窗
let filePreviewVisible = ref(false);
let fileId = ref("");
let fileType = ref("");
let fileUrl = ref("");

const activeName = ref("A");
const form = ref({
  id: undefined,
  contractId: "",
  contractNo: "",
  contractName: "",
  purchaseDeptName: "",
  projectDeptName: "",
  projectName: "",
  projectAddress: "",
  supplierCategoryName: "",
  supplierDeptName: "",
  contractNum: "",
  contractTotalPrice: "",
  contractTotalRealPrice: "",
  contractPrePaymentDate: "",
  contractPrePaymentRate: "",
  contractPrePaymentPrice: "",
  saleContractId: undefined
});
const receiptform = ref({
  id: undefined,
  applyUserName: "",
  applyDate: "",
  applyMark: "",
  uploadUserName: "",
  uploadDate: "",
  receiptMark: "",
  receiptFile: ""
});
const contractform = ref({
  id: undefined,
  contractNo: "", // 合同编号
  contractName: "", // 销售合同名称
  diffPricePoints: "", // 差价点
  contractRebatePoints: "", // 返利点
  // 销售合同ID
  // 合同类型
  contractType: "0", // 合同类型：0-主合同，1-补充合同
  // 销售合同信息
  saleContractId: "", // 销售合同ID
  saleContractNo: "", // 销售合同编号
  saleContractName: "", // 销售合同名称
  contractMethod: "1", // 合同方式 0-电线电缆，1-电梯
  purchaseDeptId: "", // 销售单位ID - 自动带出不展示
  purchaseDeptName: "", // 销售单位
  projectDeptId: "", // 所属单位ID
  projectDeptName: "", // 项目所属分公司
  projectId: "", // 项目ID - 自动带出不展示
  projectName: "", // 项目名称
  projectAddress: "", // 项目地址
  projectManagerId: "", // 项目联系人ID - 自动带出不展示
  projectManager: "", // 项目联系人
  projectManagerPhone: "", // 项目联系人电话
  supplierCategoryId: "", //供应商品类ID - 自动带出不展示
  supplierCategoryName: "", // 供应商品类
  supplierDeptId: "", // 供应商厂商ID - 自动带出不展示
  supplierDeptName: "", // 供应商厂商
  supplyDeptId: "", // 供应商ID - 自动带出不展示
  supplyDeptName: "", // 供应商
  inquiryNo: "", // 询价单号
  purchasePersonId: "", // 销售负责人ID - 自动带出不展示
  purchasePersonName: "", // 销售负责人
  purchasePhone: "", // 联系电话
  isPriceFlag: "1", // 允许超合同金额 0-否，1-是
  isNumFlag: "1", // 允许超合同材料数量 0-否，1-是
  contractNum: undefined, // 合同总量
  signDate: "", // 签订日期
  paymentDeadlineDate: "", // 回款截止日期
  contractTotalPrice: undefined, // 合同总额含税（元）
  contractTotalRealPrice: undefined, // 合同总额实际含税（元）
  contractTotalRealPriceMark: "", // 合同总额实际含税备注
  mark: "", // 备注
  contractFile: "", // 合同文件(数组转成字符串格式)
  processInstanceId: "", //审批流程ID

  priceType: "0", // 价格类型 0-锁定，1-浮动
  priceTypeMark: "", // 支付说明
  basePrice: 0.0, // 基础价格（元）
  increasePrice: 0.0, // 涨幅
  increaseRate: 0.0, // 涨幅比例
  paymentCycle: "0", // 收款周期 0-到货结算, 1-款清发货, 2-月度结算
  paymentReconciliationMonth: 0, // 月度结算时-收货确认对账几月
  paymentReconciliationDay: 0, // 月度结算时-收货确认对账几日(完成对账)
  contractPreStatus: "0", // 合同预收款 0-未开启，1-已开启
  ordePreStatus: "0", // 订单预收款 0-未开启，1-已开启
  nodePaySaveDtoList: [] // 收款节点表数据
});

let salesSecondContractModel = reactive({
  // 带出数据
  id: "", // 第二步的主键ID - 新增时不存在不传，编辑时存在
  contractId: "", // 合同ID
  // 表单数据
  priceType: "0", // 价格类型 0-锁定，1-浮动
  priceTypeMark: "", // 支付说明
  basePrice: 0.0, // 基础价格（元）
  increasePrice: 0.0, // 涨幅
  increaseRate: 0.0, // 涨幅比例
  paymentCycle: "0", // 收款周期 0-到货结算, 1-款清发货, 2-月度结算
  paymentReconciliationMonth: 0, // 月度结算时-收货确认对账几月
  paymentReconciliationDay: 0, // 月度结算时-收货确认对账几日(完成对账)
  contractPreStatus: "0", // 合同预收款 0-未开启，1-已开启
  ordePreStatus: "0", // 订单预收款 0-未开启，1-已开启
  nodePaySaveDtoList: [] // 收款节点表数据
});

const CollectionTableData = ref([]);

// 非新增不许删除
const beforeRemove = (uploadFile, uploadFiles) => {
  ElMessage.error("当前状态文件不可删除");
  return false;
};

let salesFileList = ref<UploadUserFile[]>([]);

let salesContractTableData = ref([]);
let salesNodePayTableData = ref([]);
const salesNodePayTableColumns = reactive([
  {
    field: "nodeType",
    title: "节点类型",
    width: 150,
    align: "center",
    formatter({ cellValue, row }) {
      if (cellValue == "0") return "合同预收款";
      else if (cellValue == "1") return "订单预收款";
      else if (cellValue == "2") return "订单实收款";
      else return cellValue;
    }
  },
  {
    field: "nodeMark",
    title: "收款节点时间",
    width: 500
  },
  {
    field: "backPayRate",
    title: "完成收款比例（%）",
    width: 200
  },
  {
    field: "nodeMark",
    title: "节点说明",
    width: 400
  }
]);

let salesMaterialTableData = ref([]);
let materiaTableData = ref([]);
let salesMaterialTableFooterData = ref<VxeTablePropTypes.FooterData>([]);
const salesMaterialTableColumns = reactive([
  {
    field: "materialCode",
    title: "材料编码",
    width: 120,
    align: "center"
  },
  {
    field: "materialName",
    title: "材料名称",
    width: 120,
    align: "center"
  },
  {
    field: "materialSpecs",
    title: "规格",
    width: 200,
    align: "center"
  },
  {
    field: "material_model",
    title: "型号",
    width: 200,
    align: "center"
  },
  {
    field: "materialUnit",
    title: "单位",
    width: 120,
    align: "center"
  },
  {
    field: "materialBrand",
    title: "税收分类编码",
    width: 120,
    align: "center"
  },
  {
    field: "materialBrand",
    title: "税收编码简称",
    width: 120,
    align: "center"
  },
  {
    field: "materialBrand",
    title: "品牌",
    width: 120,
    align: "center"
  },
  {
    field: "materialNum",
    title: "数量",
    width: 120,
    fixed: "right",
    align: "right"
  },
  {
    field: "includingTaxUnitPrice",
    title: "含税单价（元）",
    width: 120,
    fixed: "right",
    align: "right"
  },
  {
    field: "excludingTaxUnitPrice",
    title: "不含税单价（元）",
    width: 150,
    fixed: "right",
    align: "right"
  },
  {
    field: "tax",
    title: "税率（%）",
    width: 120,
    fixed: "right",
    align: "right"
  },
  {
    field: "includingTaxTotalPrice",
    title: "含税总价（元）",
    width: 150,
    fixed: "right",
    align: "right"
  },
  {
    field: "materialMark",
    title: "备注",
    width: 120,
    fixed: "right",
    align: "center"
  }
]);

const salesMaterialTablePage = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 10
});
const salesMaterialTablePageChange: VxePagerEvents.PageChange = ({
  currentPage,
  pageSize
}) => {
  salesMaterialTablePage.currentPage = currentPage;
  salesMaterialTablePage.pageSize = pageSize;
  //getProcureStepThreeData();
};

async function getinfo() {
  let params: ApiParams = {};
  params.id = queryParams.id;
  const response: ApiResponse = await getcontractpaymentfindByIdInfo(params);
  if (response.code === 200 && response.data) {
    form.value = response.data;
    getSupplierCategoryNameOptions();
    getSalesStepOneData();
    getSalesStepTwoData();
    getSalesStepThreeData();
    getSalesProjectReceiverList();
  }
  const response2: ApiResponse = await getreceiptdetail(params);
  if (response2.code === 200 && response2.data) {
    receiptform.value = response2.data;
  }
  let param: ApiParams = {};
  param.contractId = form.value.contractId;
  const response3: ApiResponse = await getpaymenthistorypageList(param);
  if (response3.code === 200 && response3.data) {
    CollectionTableData.value = response3.data.records;
  }
}

async function getSalesStepOneData() {
  let params: ApiParams = {};
  params.id =
    form.value.saleContractId == undefined
      ? form.value.contractId
      : form.value.saleContractId;
  const response: ApiResponse = await getSalesContractDetail(params);
  if (response.code === 200 && response.data) {
    contractform.value.contractType = response.data.contractType;
    contractform.value.contractMethod = response.data.contractMethod;
    contractform.value.purchaseDeptId = response.data.purchaseDeptId;
    contractform.value.purchaseDeptName = response.data.purchaseDeptName;
    contractform.value.projectDeptId = response.data.projectDeptId;
    contractform.value.projectDeptName = response.data.projectDeptName;
    contractform.value.projectId = response.data.projectId;
    contractform.value.projectName = response.data.projectName;
    contractform.value.projectAddress = response.data.projectAddress;
    contractform.value.projectManagerId = response.data.projectManagerId;
    contractform.value.projectManager = response.data.projectManager;
    contractform.value.projectManagerPhone = response.data.projectManagerPhone;
    contractform.value.supplierCategoryId = response.data.supplierCategoryId;
    contractform.value.supplierCategoryName =
      response.data.supplierCategoryName;
    contractform.value.supplierDeptId = response.data.supplierDeptId;
    contractform.value.supplierDeptName = response.data.supplierDeptName;
    contractform.value.supplyDeptId = response.data.supplyDeptId;
    contractform.value.supplyDeptName = response.data.supplyDeptName;
    contractform.value.inquiryNo = response.data.inquiryNo;
    contractform.value.contractNo = response.data.contractNo;
    contractform.value.contractName = response.data.contractName;
    contractform.value.purchasePersonId = response.data.purchasePersonId;
    contractform.value.purchasePersonName = response.data.purchasePersonName;
    contractform.value.purchasePhone = response.data.purchasePhone;
    contractform.value.isNumFlag = response.data.isNumFlag.toString();
    contractform.value.isPriceFlag = response.data.isPriceFlag.toString();
    contractform.value.contractNum = response.data.contractNum;
    contractform.value.signDate = response.data.signDate;
    contractform.value.paymentDeadlineDate =
      response.data.paymentDeadlineDate || "";
    contractform.value.contractTotalPrice = response.data.contractTotalPrice;
    contractform.value.contractTotalRealPrice =
      response.data.contractTotalRealPrice;
    contractform.value.contractTotalRealPriceMark =
      response.data.contractTotalRealPriceMark || "";
    contractform.value.mark = response.data.mark || "";
    // 处理合同文件，判空
    if (response.data.contractFile) {
      contractform.value.contractFile = response.data.contractFile;
      JSON.parse(response.data.contractFile).forEach(file => {
        salesFileList.value.push({
          name: file.fileOriginName,
          url: file.fileUrl
        });
      });
    }
    // 审批流程ID
    contractform.value.processInstanceId = response.data.processInstanceId;
  }
}
// 获取当前项目收货人列表
async function getSalesProjectReceiverList() {
  let params: ApiParams = {};
  params.contractId =
    form.value.saleContractId == undefined
      ? form.value.contractId
      : form.value.saleContractId;
  const response: ApiResponse = await getProjectReceiver(params);
  if (response.code === 200) {
    salesContractTableData.value = response.data.map(item => ({
      id: item.id,
      realName: item.name,
      phone: item.phone,
      tenantId: item.tenantId
    }));
  }
}
// 获取第二步的数据详情
async function getSalesStepTwoData() {
  let params: ApiParams = {};
  params.contractId =
    form.value.saleContractId == undefined
      ? form.value.contractId
      : form.value.saleContractId;
  try {
    // 获取表单数据
    const formRes: ApiResponse = await getNodePayFormData(params);
    if (formRes.code === 200) {
      salesSecondContractModel.id = formRes.data.id;
      salesSecondContractModel.contractId = formRes.data.contractId;
      salesSecondContractModel.priceType = formRes.data.priceType;
      salesSecondContractModel.priceTypeMark = formRes.data.priceTypeMark;
      salesSecondContractModel.basePrice = formRes.data.basePrice;
      salesSecondContractModel.increasePrice = formRes.data.increasePrice;
      salesSecondContractModel.increaseRate = formRes.data.increaseRate;
      salesSecondContractModel.paymentCycle = formRes.data.paymentCycle;
      salesSecondContractModel.paymentReconciliationMonth =
        formRes.data.paymentReconciliationMonth;
      salesSecondContractModel.paymentReconciliationDay =
        formRes.data.paymentReconciliationDay;
      salesSecondContractModel.contractPreStatus =
        formRes.data.contractPreStatus;
      salesSecondContractModel.ordePreStatus = formRes.data.ordePreStatus;
    } else {
      ElMessage.error("获取合同收款方式表单失败");
    }
    // 获取表格数据
    const tableRes: ApiResponse = await getNodePayTableData(params);
    if (tableRes.code == 200) {
      salesNodePayTableData.value = tableRes.data.records;
    } else {
      ElMessage.error("获取合同收款方式表格数据失败");
    }
  } catch (error) {
  } finally {
  }
}
// 获取第三步的数据详情
async function getSalesStepThreeData() {
  let params: ApiParams = {};
  params.pageIndex = salesMaterialTablePage.currentPage;
  params.pageSize = salesMaterialTablePage.pageSize;
  params.contractId =
    form.value.saleContractId == undefined
      ? form.value.contractId
      : form.value.saleContractId;
  try {
    const tableRes: ApiResponse = await getContractMaterialList(params);
    const footRes: ApiResponse = await getContractMaterialFooter(params);
    if (tableRes.code == 200) {
      salesMaterialTableData.value = tableRes.data.records;
      salesMaterialTablePage.total = tableRes.data.totalElements;
      // 每行数据插入 editType 字段 控制操作列按钮展示
      salesMaterialTableData.value.forEach((item: any) => {
        item.editType = false;
      });
    } else {
      ElMessage.error("获取合同材料表格数据失败");
    }
    if (footRes.code === 200) {
      salesMaterialTableFooterData.value = [];
      salesMaterialTableFooterData.value.push({
        materialNum: footRes.data.totalNum,
        includingTaxTotalPrice: footRes.data.totalPrice
      });
    } else {
      ElMessage.error("获取合同材料表格页脚数据失败");
    }
  } catch (error) {
  } finally {
  }
}

const salesNodeTypeOptions = reactive([
  { value: "0", label: "合同预付款" },
  { value: "1", label: "订单预付款" },
  { value: "2", label: "订单实付款" }
]);
const salesNodeTriggerTypeOptions = reactive([
  { value: "0", label: "合同签订后" }, // 勾选合同预付款 的数据 (未勾选则：全部不可选)
  { value: "1", label: "供应商确认订单后" }, // 勾选订单预付款 的数据 (未勾选则：到货结算、款清发货 可选)
  { value: "2", label: "供应商确认供货后" }, // 到货结算 可选
  { value: "3", label: "项目部确认验收后" }, // 到货结算 月度结算 可选
  { value: "4", label: "对账完成后" }, // 款清发货 可选
  { value: "5", label: "对账确认后" }, // 到货结算 款清发货 可选
  { value: "6", label: "结算确认后" }, // 到货结算 款清发货 可选
  { value: "9", label: "自定义" } // 均 可选
]);
const salesNodeTriggerTypeForLift = reactive([
  { value: "0", label: "预付款，订单签订后" },
  { value: "1", label: "排产款，排期生产后" },
  { value: "2", label: "提货款，收到货物后" },
  { value: "3", label: "到货款，收到货物后" },
  { value: "4", label: "尾款，订单执行完成后" },
  { value: "9", label: "自定义" }
]);
const getSalesAvailableNodeTriggerTypeList = (paymentCycle, nodeType) => {
  const availableOptions = salesNodeTriggerTypeOptions.filter(option => {
    switch (paymentCycle) {
      case "0": // 到货结算
        switch (nodeType) {
          case "0": // 合同预付款
            return ["0"].includes(option.value);
          case "1": // 订单预付款
            return ["1"].includes(option.value);
          default: // 订单实付款
            return ["1", "2", "3", "5", "6", "9"].includes(option.value);
        }
      case "1": // 款清发货
        switch (nodeType) {
          case "0": // 合同预付款
            return ["0"].includes(option.value);
          case "1": // 订单预付款
            return ["1"].includes(option.value);
          default: // 订单实付款
            return ["1", "4", "5", "6", "9"].includes(option.value);
        }
      case "2": // 月度结算
        switch (nodeType) {
          case "0": // 合同预付款
            return ["0"].includes(option.value);
          case "1": // 订单预付款
            return ["1"].includes(option.value);
          default: // 订单实付款
            return ["3", "9"].includes(option.value);
        }
      default:
        switch (nodeType) {
          case "0": // 合同预付款
            return ["0"].includes(option.value);
          case "1": // 订单预付款
            return ["1"].includes(option.value);
          default: // 订单实付款
            return ["9"].includes(option.value);
        }
    }
  });
  return availableOptions;
};
// 材料表格预览
function openViewForPurchase() {
  fileId.value = queryParams.id as string;
  fileType.value = "purchase";
  filePreviewVisible.value = true;
}
function closeFilePreview(val: boolean) {
  filePreviewVisible.value = val;
}

//合计行
function footerMethod({ columns, data }) {
  return [
    columns.map((column, columnIndex) => {
      if (columnIndex === 0) {
        return "合计";
      }
      if ([].includes(column.field)) {
        return sumNum(materiaTableData.value, column.field);
      }
      return null;
    })
  ];
}
const sumNum = (list: any[], field: string) => {
  let count = 0;
  list.forEach(item => {
    if (item[field]) {
      count += Number(item[field]);
    }
  });
  return count;
};

///////////////////// 公共 /////////////////////
const supplierCategoryNameOptions = ref([]);
async function getSupplierCategoryNameOptions() {
  const res: any = await getDictDetail({
    key: "supplier_type"
  });
  supplierCategoryNameOptions.value.splice(
    0,
    supplierCategoryNameOptions.value.length
  );
  res.data.forEach((item: any) => {
    supplierCategoryNameOptions.value.push({
      key: item.id,
      label: item.value,
      value: item.key
    });
  });
}
onMounted(() => {
  getinfo();
});
</script>
<style lang="scss" scoped>
.card-header {
  display: flex;
  align-items: center;
}
.header-span {
  display: flex;
  align-items: center;
}
.item {
  display: flex;
  align-items: center;
  margin-left: 20px;
  font-size: 12px;
}
.container {
  height: 20px;
  width: 80px;
  text-align: center;
  border: 1px solid #eee;
  line-height: 20px;
  font-size: 12px;
  margin-right: 6px;
  border-radius: 20px;
}
.examine {
  display: grid;
  place-items: center;
  img {
    height: 15vh;
  }
}
::v-deep .el-tabs .el-tabs__item.is-active {
  background-color: #fff !important;
}
</style>
